import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useMemo } from 'react';
import type { IconType } from '../index.d';
import styles from '../index.module.less';

const ShowCategory: React.FC<{
  category: string;
  onCategoryClick: (mode: string) => void;
}> = (props) => {
  const { category, onCategoryClick } = props;

  const icons: IconType = useMemo(
    () => ({
      mode: <QuestionCircleOutlined />,
      station: <QuestionCircleOutlined />,
      sensor: <QuestionCircleOutlined />,
      all: <QuestionCircleOutlined />,
    }),
    [],
  );

  return (
    <FloatButton.Group
      trigger="hover"
      shape="square"
      placement="right"
      className={styles.theme}
      tooltip={{
        title: '设置可见性',
        placement: 'left',
      }}
      icon={icons[category || 'mode']}
      onClick={() => onCategoryClick('')}
    >
      <FloatButton
        icon={icons.station}
        tooltip="监测站"
        onClick={() => onCategoryClick('station')}
      />
      <FloatButton
        icon={icons.sensor}
        tooltip="传感器"
        onClick={() => onCategoryClick('sensor')}
      />
      <FloatButton
        icon={icons.all}
        tooltip="全部"
        onClick={() => onCategoryClick('')}
      />
    </FloatButton.Group>
  );
};

export default ShowCategory;
